<template>
  <div class="details_page">
    <navigate>培训讲座报名详情</navigate>
    <div class="details_cont">
      <!-- 讲座信息 -->
      <div class="training_info white_box">
        <div class="theme_txt">
          培训讲座主题:{{ dataInfo.name }}
        </div>
        <img :src="dataInfo.textbook_cover" alt="" class="theme_img" />

        <div class="form_box dis_flex" v-if="false">
          <div class="form_txt">讲座发布时间：</div>
          <div class="form_info dis_flex">
            <div class="courseware_txt">使用课件PPT：</div>
            <div class="courseware_btn">查看课件</div>
          </div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">讲座发布时间：</div>
          <div class="form_info">{{ convertTimestampToDateTime(dataInfo.time) }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">活动当前阶段：</div>
          <div class="form_info">{{ getStatus(dataInfo.status) }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">培训讲座类型：</div>
          <div class="form_info">{{ dataInfo.type_name }}</div>
        </div>

        <div class="form_box dis_flex">
          <div class="form_txt">发布人员：</div>
          <div class="form_info">{{ dataInfo.user_name }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">发布人身份：</div>
          <div class="form_info">{{ dataInfo.role_name }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">活动举行地点：</div>
          <div class="form_info">{{ dataInfo.address }}</div>
        </div>
      </div>
      <!-- 培训讲师介绍 -->
      <div class="">
        <div class="head_label">
          <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
          <div class="label_txt">培训讲师介绍</div>
        </div>
        <div class="lecturer_box white_box">
          <div class="dis_flex">
            <img :src="dataInfo.lecturer_photo" alt="" class="lecturer_img" />
            <div>
              <div class="dis_flex">
                <span class="lecturer_name">{{ dataInfo.lecturer_name }}</span>
                <img
                  :src="dataInfo.lecturer_sex == 1 ? require('@/assets/images/common/man.png') : require('@/assets/images/common/female.png')"
                  alt="" class="gender_icon" />
                <span class="lecturer_age">{{ dataInfo.lecturer_age }}</span>
              </div>
              <div class="lecturer_info">标签：</div>
              <div class="lecturer_info">{{ dataInfo.lecturer_label }}</div>
            </div>
          </div>
          <div class="division_line"></div>
          <div class="lecturer_introduce">
            简介：{{ dataInfo.lecturer_introduce }}
          </div>
        </div>
      </div>
      <!-- 活动内容详情 -->
      <div class="">
        <div class="head_label">
          <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
          <div class="label_txt">活动内容详情</div>
        </div>
        <div class="activity_cont white_box">
          <div class="activity_det_tit">一、活动对象说明</div>
          <div class="activity_det_txt">
            本次活动开放对象为：{{dataInfo.TrainingTaskDepartment?.map(item =>
              item.name).join('、')}}，望大家积极报名参与。
          </div>
          <div class="activity_det_tit">二、培训讲座简介：</div>
          <div class="activity_det_txt">
            {{ dataInfo.introduce }}
          </div>
          <!-- 前置任务 -->
          <div>
            <div class="activity_det_tit">三、前置测评任务：</div>
            <div class="activity_det_txt evaluation_txt">
              本次活动开展前，请完成以下测评任务：
            </div>
            <div class="evaluation_box">
              <div class="item_evaluation" v-for="item in dataInfo.TrainingTaskRatingScaleFront">
                <div class="dis_flex">
                  <img :src="item.rating_scale_cover" alt="" class="evaluation_img" />
                  <div class="dis_flex just_space_between flex1">
                    <div>
                      <div class="evaluation_txt">{{ item.rating_scale_name }}</div>
                      <div class="state_show dis_flex">
                        <img src="@/assets/images/common/success_icon.png" alt="" class="evaluation_state_img"
                          v-if="item.result_id > 0" />
                        <img src="@/assets/images/common/fail_icon.png" alt="" class="evaluation_state_img" v-else />
                        <div class="evaluation_state">{{ item.result_id > 0 ? '任务已完成。' : '任务未完成' }}</div>
                      </div>
                    </div>
                    <div class="evaluation_btn" @click="toEvaluation(item)">
                      {{ item.result_id > 0 ? '查看报告' : '去测评' }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 后置任务 -->
          <div>
            <div class="activity_det_tit">四、后置置测评任务：</div>
            <div class="activity_det_txt evaluation_txt">
              本次活动开展前，请完成以下测评任务：
            </div>
            <div class="evaluation_box">
              <div class="item_evaluation" v-for="item in dataInfo.TrainingTaskRatingScaleAfter">
                <div class="dis_flex">
                  <img :src="item.rating_scale_cover" alt="" class="evaluation_img" />
                  <div class="dis_flex just_space_between flex1">
                    <div>
                      <div class="evaluation_txt">{{ item.rating_scale_name }}</div>
                      <div class="state_show dis_flex">
                        <img src="@/assets/images/common/success_icon.png" alt="" class="evaluation_state_img"
                          v-if="item.result_id > 0" />
                        <img src="@/assets/images/common/fail_icon.png" alt="" class="evaluation_state_img" v-else />
                        <div class="evaluation_state">{{ item.result_id > 0 ? '任务已完成。' : '任务未完成' }}</div>
                      </div>
                    </div>
                    <div class="evaluation_btn" @click="toEvaluation(item)">{{ item.result_id > 0 ? '查看报告' : '去测评' }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 活动时间安排 -->
      <div>
        <div class="head_label">
          <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
          <div class="label_txt">活动时间安排</div>
        </div>
        <div class="padding20 white_box">

          <div class="mar_bottom24">
            <div class="activity_det_tit"> ▶ 培训讲座时间：</div>
            <div>
              <span class="activity_time">{{ convertTimestampToDateTime(dataInfo.start_time) }}</span>
              <span class="time_division">--</span>
              <span class="activity_time">{{ convertTimestampToDateTime(dataInfo.end_time) }}</span>
            </div>
          </div>
          <div class="mar_bottom24">
            <div class="activity_det_tit"> ▶ 培训报名时间：</div>
            <div class="activity_desc">开始前都可报名（报名{{ dataInfo.review == 1 ? '需要' : "不需要" }}审核） </div>
          </div>
          <div class="mar_bottom24">
            <div class="activity_det_tit"> ▶ 培训举行地点：</div>
            <div class="activity_desc">{{ dataInfo.address }}</div>
          </div>
        </div>
      </div>

      <!-- 暂无数据 -->
      <div class="no_data_txt">- 暂无更多内容了 -</div>
    </div>

    <!-- 底部 -->
    <div class="footer_box dis_flex">
      <div class="footer_txt">
        <div>当前阶段：{{ getStatus(dataInfo.status) }}</div>
      </div>
      <div class="footer_btn" @click="signUp(dataInfo.id)">确定报名</div>
    </div>

    <!-- 报名成功弹窗 -->
    <van-popup v-model="successPop" round position="center">
      <div class="pop_box dis_flex just_center">
        <img src="@/assets/images/common/success_icon.png" alt="" class="pop_tips_img" />
        <div class="pop_tips_txt">培训讲座报名成功！</div>
      </div>
    </van-popup>
    <!-- 报名失败弹窗 -->
    <van-popup v-model="errorPop" round position="center">
      <div class="pop_box dis_flex just_center">
        <img src="@/assets/images/common/error_icon.png" alt="" class="pop_tips_img" />
        <div class="pop_tips_txt">培训讲座报名失败！</div>
      </div>
    </van-popup>
    <!-- <lightHintPop :isShowPop='isShowPop' :tipsInfo='tipsInfo' /> -->
  </div>
</template>

<script>

import { convertTimestampToDateTime } from '@/utils/time.js'
import lightHintPop from '@/components/lightHintPop'
import { trainingListInfo, trainingSignUp } from '@/api/funcation/training.js'
export default {
  data() {
    return {
      successPop: false,
      errorPop: false,
      isShowPop: true,
      tipsInfo: {
        type: 'success',
        txt: '培训讲座报名成功！'
      },
      dataInfo: []
    };
  },
  created() {
    this.getInfo(this.$route.query.id)
  },
  computed: {
    getStatus() {
      return (ss) => {
        if (ss == 1) return "报名中";
        if (ss == 2) return "培训中";
        if (ss == 3) return "已结束";
      };
    },
  },
  components: { lightHintPop },
  methods: {
    convertTimestampToDateTime,
    async getInfo(id) {
      let param = { id: id }
      let { data } = await trainingListInfo(param);
      this.dataInfo = data;

    },
    async signUp(id) {
      let param = { id: id }
      let data = await trainingSignUp(param);
      if (data.code == 200) {
        this.$toast.success("报名成功！");
      }
    },
    toEvaluation(item) {
      //如果this.dataInfo.status为3后置任务才能进行测评
      if (this.dataInfo.status !== 3 && item.type == 2) {
        return this.$toast.fail('课后测评任务需要课程结束后才可测评')
      }
      if (item.result_id > 0) {
        this.$router.push(`/lectureReport?resultId=${item.result_id}`)
      } else {
        this.$router.push(`/normalAnswer?id=${item.rating_scale_id}&type=trainingLecture&&taskType=${item.type}&taskId=${item.task_id}`);
      }
    }
  }
};
</script>


<style lang="less" scoped>
.white_box {
  background: #ffffff;
  border-radius: 6.67px;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.just_center {
  justify-content: center;
}

.just_space_between {
  justify-content: space-between;
}

.flex1 {
  flex: 1;
}

.padding20 {
  padding: 20px;
}

.mar_bottom24 {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

//标签
.head_label {
  display: flex;
  align-items: center;
  margin: 19px 0;
}

.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}

.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.details_page {
  background-color: #f4f6fa;
  color: #333333;
}

.details_cont {
  padding: 10px 10px 60px 10px;
}

.training_info {
  padding: 10px 10px 0 10px;
}

.theme_txt {
  font-size: 16.67px;
  font-weight: bold;
  line-height: 25px;
}

.theme_img {
  width: 320px;
  height: 180px;
  margin-top: 16.33px;
}

.form_box {
  font-size: 14px;
  line-height: 14px;
  padding: 14px 0;
  border-bottom: 0.33px solid #dddddd;

  &:last-child {
    border: 0;
  }
}

.form_txt {
  color: #333333;
  min-width: 120px;
}

.form_info {
  line-height: 20px;
  color: #777777;
}

.courseware_txt {
  color: #0090ff;
  font-size: 14px;
  text-decoration: underline;
}

.courseware_btn {
  width: 66.67px;
  height: 28.67px;
  line-height: 28.67px;
  text-align: center;
  border-radius: 5.33px;
  color: #ffffff;
  font-size: 12.67px;
  margin-left: 14.67px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
}

.lecturer_name {
  font-weight: bold;
  font-size: 16.67px;
}

.lecturer_box {
  padding: 20px 10px 14px 10px;
}

.division_line {
  border-bottom: 0.33px solid #dddddd;
  margin: 16px 0;
}

.lecturer_introduce {
  line-height: 28px;
  font-size: 14px;
}

.lecturer_img {
  width: 63.33px;
  height: 63.33px;
  border-radius: 8px;
  margin-right: 10.33px;
}


.gender_icon {
  width: 16.67px;
  height: 16.67px;
  margin: 0 9px;
}

.lecturer_age {
  font-size: 14.67px;
}

.gender_icon {
  width: 16.67px;
  height: 16.67px;
  margin: 0 9px;
}

.lecturer_info {
  font-size: 12.67px;
  color: #333333;
}

.lecturer_lable {
  font-size: 14px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85%;
}

.activity_cont {
  padding: 40px 20px;
}

.activity_det_tit {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
  margin-bottom: 13px;
}

.activity_det_txt {
  font-size: 14px;
  color: #555555;
  line-height: 29.33px;
  text-indent: 2em;
  margin: 19px 0;
}

.activity_desc {
  color: #555555;
  font-size: 14px;
}

.evaluation_txt {
  text-indent: 0;
}

.time_box {
  padding: 18px 10px;
}

.activity_time {
  // width: 150.33px;
  // height: 33.33px;
  padding: 6px 2px;
  line-height: 33.33px;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
    #ffffff;
  border: 1px solid #999999;
  border-radius: 6.67px;
  font-size: 13.33px;
  text-align: center;
}

.time_division {
  font-size: 14px;
  color: #000000;
  margin: 0 4px;
}

.activity_desc {
  color: #777777;
  font-size: 14px;
}


.stage_01 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #ff9500;
}

.stage_02 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #29cca6;
}

.stage_03 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #2e8ae6;
}

.activity_txt {
  color: #333333;
  font-size: 14px;
  margin-top: 15.67px;
}


.audit_txt {
  font-size: 14px;
  color: #ff9500;
  margin-top: 12.33px;
}

.tips_info {
  margin-top: 22.67px;
  font-size: 14px;
}

.tips_tit {
  margin-bottom: 18px;
  color: #333333;

}

.tips_txt {
  color: #555555;
  line-height: 28px;
}

.plan_txt {
  padding: 24px 10px;
  color: #555555;
  font-size: 14px;
  line-height: 28px;
}

.no_data_txt {
  font-size: 10.67px;
  color: #555555;
  text-align: center;
  margin: 33px 0;
}

.footer_box {
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background: #fff;
}

.footer_txt {
  font-size: 14px;
  line-height: 14px;
  padding-left: 20px;
}

.footer_btn {
  width: 103.33px;
  height: 59.67px;
  line-height: 59.67px;
  text-align: center;
  color: #ffffff;
  font-size: 15.33px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
}

.item_evaluation {
  border-bottom: 0.67px solid #dddddd;
  padding: 16px 0;

  &:last-child {
    border: 0;
  }
}

.evaluation_img {
  width: 40px;
  height: 40.67px;
  border-radius: 6px;
  margin-right: 9.33px;
}

.evaluation_txt {
  font-size: 14px;
  line-height: 14px;
}

.state_show {
  margin-top: 7px;
}

.evaluation_state_img {
  width: 15.33px;
  height: 15.33px;
}

.evaluation_state {
  color: #000000;
  font-size: 12px;
  line-height: 12px;
  margin-left: 6px;
}

.evaluation_btn {
  width: 80px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
  color: #ffffff;
  font-size: 12.67px;
}

.pop_box {
  width: 215px;
  height: 53.33px;
  line-height: 53.33px;
}

.pop_tips_img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.pop_tips_txt {
  font-size: 16.67px;
  color: #ffffff;
}

::v-deep.van-popup--center.van-popup--round {
  border-radius: 26.67px;
  background: #000000;
  opacity: 0.8;
}
</style>